<template>
  <div>

    <el-tabs v-model="label" type="border-card">
      <el-tab-pane v-show="label===1">
        <span slot="label">合同信息</span>
        <h4>房产信息 <el-button type="warning" @click="SfList()">收房合同查询</el-button></h4>
        <el-form ref="formInsert" :inline="true" :rules="rules" :model="formInsert" label-width="100px">
          <el-form-item label="小区名称" prop="">
            <el-input v-model="formInsert.premiseName" placeholder="小区名称" />
          </el-form-item>
          <el-form-item label="房产信息" prop="">
            <el-input v-model="formInsert.houseName" placeholder="房产信息" />
          </el-form-item>
          <el-form-item label="所有权类型" prop="">
            <el-select v-model="formInsert.houseType" placeholder="房源类型">
              <el-option label="国有房产" value="1" />
              <el-option label="直管房产" value="2" />
              <el-option label="自管房产" value="3" />
              <el-option label="军队房产" value="4" />
              <el-option label="集体所有房产" value="5" />
              <el-option label="私有房产" value="6" />
              <el-option label="港澳台投资房产" value="7" />
              <el-option label="涉外房产" value="8" />
              <el-option label="其他房产" value="9" />
            </el-select>
          </el-form-item>
          <el-form-item label="房产证书编号" prop="">
            <el-input v-model="formInsert.houseZsNo" placeholder="房产证书编号" />
          </el-form-item>
          <el-form-item label="产权地址" prop="">
            <el-input v-model="formInsert.cqAddress" placeholder="产权地址" />
          </el-form-item>
          <h4>业主信息</h4>

          <el-form-item label="业主姓名" prop="">
            <el-input v-model="formInsert.ownerName" placeholder="业主姓名" />
          </el-form-item>
          <el-form-item label="" prop="">
            <el-select v-model="formInsert.certificateType" placeholder="业主证件类型">
              <el-option label="身份证" value="1" />
              <el-option label="护照" value="2" />
              <el-option label="台胞证" value="3" />
              <el-option label="港澳通行证" value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="业主证件号" prop="">
            <el-input v-model="formInsert.ownerIdCard" placeholder="业主证件号" />
          </el-form-item>
          <el-form-item label="业主手机号" prop="">
            <el-input v-model="formInsert.ownerMobile" placeholder="业主手机号" />
          </el-form-item>
          <el-form-item label="业主联系地址" prop="">
            <el-input v-model="formInsert.ownerContactAddress" placeholder="业主联系地址" />
          </el-form-item>
          <el-form-item label="签约人" prop="">
            <el-input v-model="formInsert.signUserName" placeholder="签约人" />
          </el-form-item>
          <el-form-item label="" prop="">
            <el-select v-model="formInsert.certificateType" placeholder="签约人证件类型">
              <el-option label="身份证" value="1" />
              <el-option label="护照" value="2" />
              <el-option label="台胞证" value="3" />
              <el-option label="港澳通行证" value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="签约人证件号" prop="">
            <el-input v-model="formInsert.signUserIdCard" placeholder="签约人证件号" />
          </el-form-item>
          <el-form-item label="签约人手机号" prop="">
            <el-input v-model="formInsert.signUserMobile" placeholder="签约人手机号" />
          </el-form-item>
          <el-form-item label="紧急联系电话" prop="">
            <el-input v-model="formInsert.signUserEmergencyPhone" placeholder="紧急联系电话" />
          </el-form-item>
          <el-form-item label="账户类型" prop="">
            <el-select v-model="formInsert.accountType" placeholder="账户类型">
              <el-option label="请选择" :value="0" />
              <el-option label="对公账户" :value="1" />
              <el-option label="对私账户" :value="2" />
            </el-select>
          </el-form-item>
          <span v-show="formInsert.accountType === 1">
            <el-form-item label="开户省份" prop="">
              <el-input v-model="formInsert.bankAccountProvince" placeholder="开户省份" />
            </el-form-item>
            <el-form-item label="银行名称" prop="">
              <el-input v-model="formInsert.bankId" placeholder="银行名称" />
            </el-form-item>
            <el-form-item label="开户支行" prop="">
              <el-input v-model="formInsert.bankOpen" placeholder="开户支行" />
            </el-form-item>
            <el-form-item label="银行行号" prop="">
              <el-input v-model="formInsert.bankBranchCodeLh" placeholder="银行行号" />
            </el-form-item>
            <el-form-item label="账户姓名" prop="">
              <el-input v-model="formInsert.accountName" placeholder="账户姓名" />
            </el-form-item>
            <el-form-item label="银行卡号" prop="">
              <el-input v-model="formInsert.bankCardNumber" placeholder="银行卡号" />
            </el-form-item>
          </span>
          <span v-show="formInsert.accountType === 2">
            <el-form-item label="开户省份" prop="">
              <el-input v-model="formInsert.bankAccountProvince" placeholder="开户省份" />
            </el-form-item>
            <el-form-item label="银行名称" prop="">
              <el-input v-model="formInsert.bankId" placeholder="银行名称" />
            </el-form-item>
            <el-form-item label="账户姓名" prop="">
              <el-input v-model="formInsert.accountName" placeholder="账户姓名" />
            </el-form-item>
            <el-form-item label="银行卡号" prop="">
              <el-input v-model="formInsert.bankCardNumber" placeholder="银行卡号" />
            </el-form-item>
          </span>

          <h4>租约信息</h4>

          <el-form-item label="租约期限">
            <el-col :span="11">
              <el-date-picker v-model="formInsert.leaseStartTime" type="date" placeholder="选择日期" style="width: 100%;" />
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-date-picker v-model="formInsert.leaseEndTime" type="date" placeholder="选择日期" style="width: 100%;" />
            </el-col>
          </el-form-item>
          <el-form-item label="租金" prop="">
            <el-input v-model="formInsert.monthRent" placeholder="租金" />
          </el-form-item>
          <el-form-item label="房租押金" prop="">
            <el-input v-model="formInsert.depositMoney" placeholder="房租押金" />
          </el-form-item>
          <el-form-item label="支付方式" prop="">
            押<el-select v-model="formInsert.depositType" placeholder="请选择">
              <el-option label="0" value="0" />
              <el-option label="1" value="1" />
              <el-option label="2" value="2" />
              <el-option label="3" value="3" />
            </el-select>
            付<el-select v-model="formInsert.paymentType" placeholder="请选择">
              <el-option label="0" value="0" />
              <el-option label="1" value="1" />
              <el-option label="2" value="2" />
              <el-option label="3" value="3" />
            </el-select>

          </el-form-item>
          <el-form-item label="备注" prop="">
            <el-input v-model="formInsert.remark" type="textarea" placeholder="备注" />
          </el-form-item>
          <div align="right">
            <el-form-item>
              <el-button type="primary" @click="resetForm('formInsert')">重置</el-button>
              <el-button type="primary" @click="goBack()">返回</el-button>
              <el-button type="primary" @click="nextOne()">下一步</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane v-show="label===2">
        <span slot="label">附件</span>
        <!--菜单表单      -->
        <el-form ref="formInsert" :inline="true" :rules="rules" :model="formInsert" label-width="100px">
          <h4>房产证照片</h4>
          <el-form-item label="" :label-width="formLabelWidth">
            <el-upload
              action="http://localhost:8092/upload/pic"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="houseDocumentPhotos" alt="">
            </el-dialog>
          </el-form-item>
          <h4>收房合同</h4>
          <el-form-item label="" :label-width="formLabelWidth">
            <el-upload
              action="http://localhost:8092/upload/pic"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="contractPhotos" alt="">
            </el-dialog>
          </el-form-item>
          <h4>业主身份证明</h4>
          <el-form-item label="" :label-width="formLabelWidth">
            <el-upload
              action="http://localhost:8092/upload/pic"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="cardPhotos" alt="">
            </el-dialog>
          </el-form-item>
          <h4>代理人身份证明</h4>
          <el-form-item label="" :label-width="formLabelWidth">
            <el-upload
              action="http://localhost:8092/upload/pic"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="agentCardPhotos" alt="">
            </el-dialog>
          </el-form-item>
          <h4>银行卡信息</h4>
          <el-form-item label="" :label-width="formLabelWidth">
            <el-upload
              action="http://localhost:8092/upload/pic"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="bankCardInformationPhotos" alt="">
            </el-dialog>
          </el-form-item>
          <h4>委托书</h4>
          <el-form-item label="" :label-width="formLabelWidth">
            <el-upload
              action="http://localhost:8092/upload/pic"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="attorneyPhotos" alt="">
            </el-dialog>
          </el-form-item>
          <h4>物业交割单</h4>
          <el-form-item label="" :label-width="formLabelWidth">
            <el-upload
              action="http://localhost:8092/upload/pic"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="propertyDeliverys" alt="">
            </el-dialog>
          </el-form-item>
          <h4>其他</h4>
          <el-form-item label="" :label-width="formLabelWidth">
            <el-upload
              action="http://localhost:8092/upload/pic"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="otherPhotos" alt="">
            </el-dialog>
          </el-form-item>
          <div align="right">
            <el-form-item>
              <el-button type="primary" @click="resetForm('formInsert')">重置</el-button>
              <el-button type="primary" @click="goBack()">返回</el-button>
              <el-button type="primary" @click="nextTwo()">下一步</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane v-show="label===3">
        <span slot="label">付款单</span>
        <h4>付款单</h4>
        <el-table
          :data="FuData"
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="序号"
          />
          <el-table-column
            prop="leaseStartTime"
            label="应付日期"
            :formatter="changeDate"
          />
          <el-table-column
            prop="depositMoney"
            label="金额"
          />
          <el-table-column
            prop="depositMoney"
            label="税费"
          />
          <el-table-column
            property="houseLeaseType"
            label="付款状态"
          />
          <el-table-column
            prop=""
            label="房产租金周期"
            :formatter="changeDate"
          >
            <template scope="scope">
              {{ scope.row.leaseStartTime }}
              至{{ scope.row.leaseEndTime }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="text" style="color: chocolate" @click="xz(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div align="right">
          <el-button type="primary" @click="resetForm('formInsert')">重置</el-button>
          <el-button type="primary" @click="goBack()">返回</el-button>
          <el-button type="primary" @click="insert">立即创建</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div>
      <el-dialog title="收房合同查询" :visible.sync="dialogTableVisible">
        <el-form ref="pageInfo" :inline="true" class="demo-form-inline" :model="pageInfo" align="left">
          <el-form-item label="业主姓名">
            <el-input v-model="pageInfo.ownerName" placeholder="业主姓名" />
          </el-form-item>
          <el-form-item label="小区名称">
            <el-input v-model="pageInfo.premiseName" placeholder="小区名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="warning" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="HouseData"
          style="width: 100%"
        >
          <el-table-column
            prop="ownerName"
            label="业主姓名"
          />
          <el-table-column
            prop="houseName"
            label="房产信息"
          />
          <el-table-column
            prop="conSignTime"
            label="签约日期"
            :formatter="changeDate"
          />
          <el-table-column
            property="houseLeaseType"
            label="租房类型"
          >
            <template scope="scope">
              <span v-if="scope.row.houseLeaseType==1">
                <span type="text">公寓</span>
              </span>
              <span v-if="scope.row.houseLeaseType==0">
                <span type="text">整租</span>
              </span>
              <span v-if="scope.row.houseLeaseType==3">
                <span type="text">合租</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="text" style="color: chocolate" @click="xz(scope.row)">选中</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="pageInfo.pageNum"
          :page-sizes="[10,20, 30, 40]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Add',
  data() {
    return {
      houseDocumentPhotos: '',
      contractPhotos: '',
      cardPhotos: '',
      agentCardPhotos: '',
      bankCardInformationPhotos: '',
      attorneyPhotos: '',
      propertyDeliverys: '',
      otherPhotos: '',
      formLabelWidth: 150,
      dialogTableVisible: false,
      label: 1,
      // 列表
      HouseData: [],
      total: 0,
      formInsert: [{
        accountType: 0,
        sfContractNo: '',
        premiseName: '',
        houseType: ''
      }],
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        ownerName: '',
        premiseName: ''
      },
      rules: {

      },
      FuData: []
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.houseDocumentPhotos = res.url
      this.contractPhotos = res.url
      this.cardPhotos = res.url
      this.agentCardPhotos = res.url
      this.bankCardInformationPhotos = res.url
      this.attorneyPhotos = res.url
      this.propertyDeliverys = res.url
      this.otherPhotos = res.url
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      console.log(file)
    },
    xz(sc) {
      this.axios.get('http://localhost:8092/tSfContract/searchSfListById?sfContractNo=' + sc.sfContractNo).then(res => {
        console.log(res.data)
        if (res.data.code === '200') {
          for (var i = 0; i < res.data.obj.length; i++) {
            this.formInsert = res.data.obj[i]
          }
          this.dialogTableVisible = false
        }
      })
    },
    changeDate(row, column) {
      const date = row[column.property]
      if (date == null) {
        return ''
      }
      return this.moment(date).format('YYYY/MM/DD')
    },
    onSubmit() {
      this.SfList()
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val
      this.SfList()
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val
      this.SfList()
    },
    SfList() {
      this.axios.get('http://localhost:8092/tSfContract/searchSfListByXy', { params: this.pageInfo }).then(res => {
        console.log(res.data)
        this.dialogTableVisible = true
        this.HouseData = res.data.obj.list
        this.total = res.data.obj.total
        this.pageInfo.pageNum = res.data.obj.pageNum
        this.pageInfo.pageSize = res.data.obj.pageSize
      })
    },
    nextOne() {
      this.label = 2
      this.insert()
    },
    nextTwo() {
      this.label = 3
    },
    // 添加
    insert() {
      this.axios.post('http://localhost:8092/tSfContract/saveSfContract', this.formInsert).then(res => {
        if (res.data.code === '200') {
          // alert('添加成功')
          this.$message({
            showClose: true,
            message: '添加成功',
            type: 'success'
          })
          // this.$router.replace({ 'path': '/' })
          this.$router.push('/sys/menu')
        } else {
          this.$message({
            showClose: true,
            message: '添加失败',
            type: 'warning'
          })
        }
      })
    },
    // 重置
    resetForm(formName) {
      this.formInsert = {}
    },
    // 返回
    goBack() {
      if (this.label === 2) {
        this.label = 1
      } else if (this.label === 3) {
        this.label = 2
      }
    }
  }
}
</script>
